<template>
  <div class="header">

    <router-link class="header_left" to="/travel">
      <span class="iconfont back">&#xe614;</span>
    </router-link>

    <div class="header_mid">
        <h1> 景点详情 </h1> 
    </div>

    <div class="header_right">
      <span class="iconfont share">&#xe655;</span>
      <span class="iconfont star">&#xe600;</span>
    </div>

  </div>
  
  
</template>

<script>
export default {
  name: "TravelHeader"
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  width: 100%;
  background-color: white;
  display: flex;
  color: #ffffff;
  height: 1rem;
}
.header_left {
  width: 1rem;
}
.header_left span {
  height: 1rem;
  line-height: 1rem;
}
.header_left span.back {
  margin-left: 0.1rem;
  font-size: 0.45rem;
  color: black;
}
.header_mid {
  flex: 1;
}
.header_mid h1 {
  flex: 1;
  font-size: 0.36rem;
  font-weight: 400;
  text-align: center;
  line-height: 1rem;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: black ;
}
.header_right {
  width: 1.5rem;
 
}
.header_right span {

  line-height: 1rem;
  
}
.header_right span.share {
  margin-left: 0.1rem;
  font-size: 0.45rem;
  color: #06c1ae;
  padding-right: 10px;
 
}
.header_right span.star {
  margin-left: 0.1rem;
  font-size: 0.4rem;
  color: #06c1ae;
  padding-right: 10px;
}
</style>
